<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改密码</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <style>
    html,
    body {
        width: 100%;
        height: 100%;
    }
    
    main {
        width: 100%;
        height: 100%;
        background: url('image/bg.png') center center no-repeat;
    }
    
    .relative {
        position: relative;
    }
    
    .absolute {
        position: absolute;
    }
    
    .login {
        right: 10%;
        /*top: 30%;*/
        top: 50%;
        width: 478px;
        /*height: 478px;*/
        background-color: rgba(255, 255, 255, .5);
        box-shadow: 3px 3px 10px rbga(0, 0, 0, .8);
        transform: translate(0, -50%);
        -webkit-transform: translate(0, -40%);
        -moz-transform: translate(0, -40%);
        -ms-transform: translate(0, -40%);
    }
    
    .login .title {
        color: white;
        line-height: 110px;
        font-size: 22px;
    }
    
    .login .input {
        color: #2a2a2a;
        line-height: 56px;
        font-size: 18px;
        margin-bottom: 29px;
    }
    
    .login .input label {
        left: 5%;
        color: #2a2a2a;
        font-weight: 500;
    }
    
    .login .input input {
        text-indent: 2.5em;
        line-height: 56px;
        border: 0;
        border-radius: 5px;
        outline: none;
        border: 1px solid #fff;
    }
    
    .login .input input.oldpwd,
    .login .input input.newpwd,
    .login .input input.code {
        text-indent: 3.5em;
    }
    
    .login .input input.againpwd {
        text-indent: 4.5em;
    }
    
    #code {
        right: 0;
        width: 100px;
        background-color: #850c10;
        color: #fff;
        text-indent: 0;
    }
    
    .login .falut {
        color: #850c10;
        line-height: 20px;
    }
    
    .login .btn {
        /*margin-top: 35px;*/
        color: white;
        line-height: 56px;
        font-size: 24px;
        margin-bottom: 29px;
    }
    
    .login .btn button {
        background-color: #850c10;
        line-height: 56px;
        font-size: 24px;
        border: 0;
        border-radius: 5px;
    }
    </style>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
    <!-- <script src="js/index.js"></script> -->
</head>

<body>
    <main class="relative">
        <div class="login absolute container">
            <div class="title col-lg-12">修改密码</div>
            <div class="input col-lg-12 relative">
                <input type="text" class="col-lg-12 account">
                <label class="absolute">账号:</label>
            </div>
            <div class="input col-lg-12 relative">
                <input type="password" class="col-lg-12 oldpwd">
                <label class="absolute">原密码:</label>
            </div>
            <div class="input col-lg-12 relative">
                <input type="password" class="col-lg-12 newpwd">
                <label class="absolute">新密码:</label>
            </div>
            <div class="input col-lg-12 relative">
                <input type="password" class="col-lg-12 againpwd">
                <label class="absolute">确认密码:</label>
            </div>
            <div class="input col-lg-12 relative">
                <input type="text" class="col-lg-12 code">
                <label class="absolute">验证码:</label>
                <input class="absolute" type="button" id="code" onclick="createCode()" />
            </div>
            <div class="col-lg-12 relative">
                <label class="falut">所有选项均不能为空！</label>
            </div>
            <div class="btn col-lg-12">
                <button class="col-lg-12 sure">确认</button>
            </div>
            <!-- <div class="register col-lg-12">
                <a href="register.html" class="register_btn">注册</a>
            </div> -->
        </div>
    </main>
    <script>
    //自动生成验证码
    var code = ''; //在全局定义验证码   
    //产生验证码  
    createCode();

    function createCode() {
        code = "";
        var codeLength = 4; //验证码的长度  
        var checkCode = $("#code");
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数  
        for (var i = 0; i < codeLength; i++) { //循环操作  
            var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）  
            code += random[index]; //根据索引取得随机数加到code上  
        }
        checkCode.val(code);
    }
    var account = '',
        oldpwd = '',
        newpwd = '',
        againpwd = '';
    //判断
    $('.newpwd').blur(function() {
        oldpwd = $('.oldpwd').val();
        newpwd = $('.newpwd').val();
        if (newpwd == oldpwd) {
            $('.accout,.againpwd,.code').css('border', '1px solid #fff');
            $('.newpwd,.oldpwd').css('border', '1px solid #850c10');
            $('.falut').html('新密码不能跟旧密码相同！');
            $('.newpwd').val('');
        } else {
            $('.newpwd,.oldpwd').css('border', '1px solid #fff');
        }
    });
    $('.againpwd').blur(function() {
        againpwd = $('.againpwd').val();
        if (againpwd != newpwd) {
            $('.newpwd,.againpwd').css('border', '1px solid #850c10');
            $('.falut').html('两次密码不一样，请重新输入！');
            $('.againpwd').val('');
        } else {
            $('.newpwd,.againpwd').css('border', '1px solid #fff');
        }
    });
    $('.sure').on('click', function() {
        account = $('.account').val();
        inputCode = $('.code').val().toUpperCase();
        if (account == '' || oldpwd == '' || newpwd == '' || againpwd == '' || inputCode == '') {
            $('.falut').html('所有选项均不能为空！');
            $('.account,.oldpwd,.newpwd,.againpwd,.code').css('border', '1px solid #850c10');
        } else if (account != '' && oldpwd != '' && newpwd != '' && againpwd != '' && inputCode != '') {
            //校验验证码
            // inputCode = $('.code').val().toUpperCase();
            console.log('inputCode:'+inputCode+',code:'+code);
            if(inputCode != code){
                $('.code').css('border','1px solid #850c10');
                $('.falut').html("验证码输入错误！");
                $('.code').val('');
                createCode();
            }else{ //输入正确时
                $('.code').css('border','1px solid #fff');
                $('.falut').html('');
            }

        }

    })
    </script>
</body>

</html>
